import React from "react";
import {Icon, Input, Select} from "antd";
import {splitFiles} from "@/utils";
import {removeFileItem} from "antd/lib/upload/utils";
import request from "@/axios/tools";

const {Option} = Select;

export const handleUpload = (id, state, jump) => {
    const {fileList} = state;
    if (fileList && fileList.length) {
        let files = [];
        let extra = {
            file: []
        };

        const setExtraData = (item) => {
            return {
                name: item.name,
                description: item.description,
                alias: item.alias || 'middle'
            };
        }

        const addFile = (data) => {
            extra.file.push(data);
        }

        fileList.forEach((item) => {
            let fileOrigin = item.originFileObj;
            if (fileOrigin) {
                files.push(fileOrigin);
                let extraData = setExtraData(item);
                addFile(extraData);
            } else {
                let extraData = setExtraData(item);
                if (item.id) {
                    extraData.id = item.id;
                }
                addFile(extraData);
            }
        })

        let data = {
            id,
            'file': files,
            extra: JSON.stringify(extra)
        }
        // console.log(fileList);
        request({url: '/setmeal/addSetMealImg',method: 'post', params: data}).then(res => {
            jump();
        });
    }
};

export const UploadList = (props) => {
    let {fileList, updateFileList, state} = props;
    let fileObj = splitFiles(fileList);
    const handleRemove = (file) => {
        if (!file.id) {
            return
        }
        let {removedFile} = state;
        removedFile.push(file);

        updateFileList(removedFile, 'removedFile');

        // console.log(removedFile)
    }

    const handleRemoveFile = (file) => {

        const removedFileList = removeFileItem(file, fileList);
        if (removedFileList) {
            //   console.log(file);
            handleRemove(file);
        }

        let newFileList = fileList.filter((item) => {
            let key = item.id ? 'id' : 'uid';
            return item[key] !== file[key];
        })
        updateFileList(newFileList);
    }

    const handleUpdateDes = (value, item, field) => {
        const newFileList = fileList.map((file) => {
            let key = file.id ? 'id' : 'uid';
            if (file[key] === item[key]) {
                file[field] = value;
            }
            return file;
        })
        // console.log(fileList)
        updateFileList(newFileList);
    }

    // 图片缩略图
    const Thunbnails = (props) => {
        let {url} = props;
        return (
            <div className="image-file-box">
                <img src={url}/>
            </div>
        )
    }
    const FilesEl = (props) => {
        let {thumbnails, boxname, files} = props;
        let filesEl = files.map((item) => {
            let keyId = item.uid || item.id;
            let fileName = item.description || item.name;
            let photoType = item.alias || 'middle';
            let url = item.url;
            return (
                <div key={keyId} className={boxname}>
                    {thumbnails && thumbnails(url)}
                    <div className="file-input-box">
                        <Input
                            placeholder="输入文件描述"
                            prefix={<Icon type="paper-clip"/>}
                            defaultValue={fileName}
                            onBlur={(e) => {
                                handleUpdateDes(e.target.value, item, 'description')
                            }}
                        />
                        <Select className="file-size-select" defaultValue={photoType} onChange={(value) => {
                            handleUpdateDes(value, item, 'alias')
                        }}>
                            <Option value="small">小图</Option>
                            <Option value="middle">大图</Option>
                        </Select>
                    </div>
                    <div className="actions-del-box" onClick={() => {
                        handleRemoveFile(item)
                    }}>
                        <Icon type="delete"/>
                    </div>
                </div>
            )
        })
        return (<div className={boxname + '-wrapper'}>{filesEl}</div>)
    }

    return (
        <div className="upload-list">
            <FilesEl boxname="image-file" thumbnails={url => <Thunbnails url={url}/>} files={fileObj.getImageFiles()}/>
            <FilesEl boxname="normal-file" files={fileObj.getFiles()}/>
        </div>
    )
}